<template>
    <div>
        <table id="supplierTable">
            <tr>
                <td colspan="9">角色列表&nbsp&nbsp<a href="#" @click="showAddTable">添加角色</a></td>
            </tr>
            <tr class="data-table">
                <td>序号</td>
                <td>角色编码</td>
                <td>角色名称</td>
                <td>创建者</td>
                <td>创建时间</td>
                <td>修改者</td>
                <td>修改时间</td>
                <td colspan="2">操作</td>
            </tr>
            <tr v-for="role in roleList" class="data-table">
                <td>{{ role.id }}</td>
                <td>{{ role.roleCode }}</td>
                <td>{{ role.roleName }}</td>
                <td>{{ role.createdBy }}</td>
                <td>{{ role.creationDate }}</td>
                <td>{{ role.modifyBy }}</td>
                <td>{{ role.modifyDate }}</td>
                <td><a href="#" @click="showEditTable(role.id)">修改</a></td>
                <td><a href="#" @click="deleteRole(role.id)">删除</a></td>
            </tr>
        </table>
        <table v-if="showAddRoleTable">
            <tr>
                <td colspan="2">添加角色</td>
            </tr>
            <tr>
                <td>角色编码</td>
                <td><input v-model="role.roleCode"></td>
            </tr>
            <tr>
                <td>角色名称</td>
                <td><input v-model="role.roleName"></td>
            </tr>
            <tr>
                <td>创建者</td>
                <td><input v-model="role.createdBy"></td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td><input v-model="role.creationDate"></td>
            </tr>
            <tr>
                <td>修改者</td>
                <td><input v-model="role.modifyBy"></td>
            </tr>
            <tr>
                <td>修改时间</td>
                <td><input v-model="role.modifyDate"></td>
            </tr>
            <tr>
                <td><a href="#" @click="addSupplier">提交添加</a></td>
                <td><a href="#" @click="showAddRoleTable = false">关闭</a></td>
            </tr>
        </table>
        <table id="editSupplierTable" v-if="showEditRoleTable">
            <tr>
                <td colspan="2">修改角色 ID: {{ role.id }}</td>
            </tr>
            <tr>
                <td>角色编码</td>
                <td><input v-model="role.roleCode"></td>
            </tr>
            <tr>
                <td>角色名称</td>
                <td><input v-model="role.roleName"></td>
            </tr>
            <tr>
                <td>创建者</td>
                <td><input v-model="role.createdBy"></td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td><input v-model="role.creationDate"></td>
            </tr>
            <tr>
                <td>修改者</td>
                <td><input v-model="role.modifyBy"></td>
            </tr>
            <tr>
                <td>修改时间</td>
                <td><input v-model="role.modifyDate"></td>
            </tr>
            <tr>
                <td><a href="#" @click="updateRole">提交修改</a></td>
                <td colspan="2"><a href="#" @click="showEditRoleTable = false">关闭修改</a></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    name: 'RoleManage',
    data() {
        return {
            roleList: [],

            showAddRoleTable: false,
            showEditRoleTable: false,

            role: {},
        }
    },
    // 已挂在 (生命周期用的是比较多)(虚拟DOM已经渲染成真实DOM,DOM操作生效)
    // 1、发起后端请求，拿回数据 2、接收页面之间的传递的参数 3、子组件向父组件传递参数
    mounted: function () {
        this.getSupplierList();
    },
    watch: {},
    methods: {
        getSupplierList: function () {
            this.$axios.get("http://localhost:8080/smbmsRole/listAllRole")
                .then(res => {
                    console.log(res.data);
                    this.roleList = res.data
                }).catch(err => {
                    console.log(err);
                })
        },
        deleteRole: function (id) {
            this.$axios.delete("http://localhost:8080/smbmsRole/deleteRoleById?id=" + id)
                .then(res => {
                    console.log(res.data);
                    alert(res.data);
                    this.getSupplierList();
                }).catch(err => {
                    console.log(err);
                })
        },
        addSupplier: function () {
            this.$axios.post("http://localhost:8080/smbmsRole/addRole", this.role)
                .then(res => {
                    console.log(res.data);
                    alert(res.data);
                    this.getSupplierList();
                }).catch(err => {
                    console.log(err);
                }).then(
                    this.showAddRoleTable = false)
        },
        updateRole: function () {
            this.$axios.put("http://localhost:8080/smbmsRole/updateRole", this.role)
                .then(res => {
                    console.log(res.data);
                    alert(res.data);
                    this.getSupplierList();
                }).catch(err => {
                    console.log(err);
                }).then(
                    this.showEditRoleTable = false)
        },
        showEditTable: function (id) {
            this.$axios.get("http://localhost:8080/smbmsRole/findRoleById?id=" + id)
                .then(res => {
                    console.log(res.data);
                    this.role = res.data
                }).catch(err => {
                    console.log(err);
                }).then(
                    this.showEditRoleTable = true,
                    this.showAddRoleTable = false
                );
        },
        showAddTable: function () {
            this.showAddRoleTable = true;
            this.showEditRoleTable = false;
            this.role = {};
        },
    },
    filters: {
        filterIDnumber: function (idNumber, arg) {
            return idNumber.toString().substr(0, 4) + arg + idNumber.toString().substr(13, 4)
        }
    }
}
</script>